import React from 'react';
import {Button, Input, List} from "antd/lib/index";

const TodoListUi=(props)=>{
    return <div style={{'marginTop':20,'marginLeft':20}}>
        <div style={{'marginBottom':20}}>
            <Input onChange={props.handleChange} value={props.inputValue} placeholder=" todo list" style={{'width':300}}/>
            <Button onClick={props.handleBtn} type="primary" style={{'marginLeft':'10px'}}>提交</Button>
        </div>
        <List
            size="small"
            bordered
            dataSource={props.list}
            renderItem={(item,index) => (<List.Item onClick={()=>{props.handleDelete(index)}}>{item}</List.Item>)}
            style={{'width':360}}
        />
    </div>
}

export default TodoListUi;


// 无状态组件：只有render函数，可以使用无状态组件。，无状态组件没有生命周期函数
//优点：性能比较高
//使用场景 ： 创建UI组件。只渲染页面的时候

